<template>
	<div v-loading="isLoading" class="content-layout">
		<div class="video-wrap">
			<div class="title-box">
				<el-button type="primary" @click="goBackToResourceList">返回</el-button>
				<div class="title-name">{{ resourceInfo.name }}</div>
			</div>
			<div class="video-box">
				<polyv-video :options="{vid: resourceInfo.videoVid}" />
			</div>
		</div>
		<ul class="msg-wrap">
			<li class="msg-item">
				<div class="label">授课老师：</div>
				<div class="data">{{ resourceInfo.professorName }}</div>
			</li>
			<li class="msg-item">
				<div class="label">上传人：</div>
				<div class="data">{{ resourceInfo.createUserName }}</div>
			</li>
			<li class="msg-item">
				<div class="label">编辑人：</div>
				<div class="data">{{ resourceInfo.updateUserName }}</div>
			</li>
			<li class="msg-item">
				<div class="label">上传时间：</div>
				<div class="data">{{ resourceInfo.createTime }}</div>
			</li>
			<li class="msg-item">
				<div class="label">编辑时间：</div>
				<div class="data">{{ resourceInfo.updateTime }}</div>
			</li>
			<li class="msg-item">
				<div class="label">资源用途：</div>
				<div class="data">
					<template v-for="item in resourceInfo.rcResourceLabelInfoResponseVos">
						<template v-if="item.name === '资源用途'">{{ item.labelDetails }}</template>
					</template>
				</div>
			</li>
			<li class="msg-item">
				<div class="label">资源星级：</div>
				<div class="data">
					<template v-for="item in resourceInfo.rcResourceLabelInfoResponseVos">
						<template v-if="item.name === '星级'">{{ item.labelDetails }}</template>
					</template>
				</div>
			</li>
			<li class="msg-item">
				<div class="label">地区：</div>
				<div class="data">{{ resourceInfo.applicableArea }}</div>
			</li>
			<li class="msg-item">
				<div class="label">状态：</div>
				<div
					v-if="resourceInfo.auditStateCode === 'P'"
					class="data c-green"
				>
					{{ resourceInfo.auditState }}
				</div>
				<div
					v-else-if="resourceInfo.auditStateCode === 'N'"
					class="data c-red"
				>
					{{ resourceInfo.auditState }}
				</div>
				<div v-else class="data c-blue">{{ resourceInfo.auditState }}</div>
			</li>
			<li class="msg-item">
				<div class="label">教学阶段：</div>
				<div class="data">{{ resourceInfo.teachRange }}</div>
			</li>
			<li class="msg-item">
				<div class="label">项目：</div>
				<div class="data">
					<template v-for="(item, index) in resourceInfo.projects">
						<div v-if="index < 6" :key="index">{{ index === 5 ? '...' : item }}</div>
					</template>
				</div>
			</li>
			<li class="msg-item">
				<div class="label">适用年份：</div>
				<div class="data">
					<template v-for="(item, index) in resourceInfo.applicableYears">
						<div v-if="index < 6" :key="index">{{ index === 5 ? '...' : item }}</div>
					</template>
				</div>
			</li>
			<li class="msg-item">
				<div class="label">科目：</div>
				<div class="data">
					<template v-for="(item, index) in resourceInfo.subjects">
						<div v-if="index < 6" :key="index">{{ index === 5 ? '...' : item }}</div>
					</template>
				</div>
			</li>
			<li class="msg-item">
				<div class="label">章节目录：</div>
				<div class="data">
					<template v-for="(item, index) in resourceInfo.chapters">
						<div v-if="index < 6" :key="index">{{ index === 5 ? '...' : item }}</div>
					</template>
				</div>
			</li>
			<li class="msg-item">
				<div class="label">知识点：</div>
				<div class="data">
					<template v-for="(item, index) in resourceInfo.knowledges">
						<div v-if="index < 6" :key="index">{{ index === 5 ? '...' : item }}</div>
					</template>
				</div>
			</li>
		</ul>
	</div>
</template>

<script>
	import coursewareApi from "@rc/apis/rc/courseware.mjs";
	import PolyvVideo from "@rc/pages/components/polyv-video.vue";

	export default {
		props: {
			// 资源id  必传
			id: {
				type: String,
				required: true
			},
			pageIndex: {
				type: Number,
				required: true
			}
		},
		name: "resource-preview",
		components: {
			PolyvVideo
		},
		data() {
			return {
				isLoading: false, // 页面加载状态
				resourceInfo: {
					name: "", // 视频资源名称
					videoVid: "", // 视频vid
					professorName: "", // 授课老师名称
					createUserName: "", // 上传人名称
					updateUserName: "", // 	编辑人名称
					createTime: "", // 	上传时间
					updateTime: "", // 编辑时间
					applicableArea: "", // 地区
					auditState: "", // 审核情况
					teachRange: "", // 教学阶段
					applicableYears: [], // 适用年份
					projects: [], // 项目
					subjects: [], // 科目
					chapters: [], // 章节目录
					knowledges: [], // 知识点
					rcResourceLabelInfoResponseVos: [] // 资源标签信息集合
				}
			};
		},
		watch: {
			id: {
				handler(id) {
					if (!id) {
						this.$alert("缺失资源id参数，请确认资源信息是否正常", "提示");
						return;
					}
					// 查询资源详情
					this.isLoading = true;
					coursewareApi.queryResourcePreviewInfo({
						data: { resourceId: id },
						success: (data) => {
							this.resourceInfo = data;
							this.isLoading = false;
						}
					});
				},
				immediate: true
			}
		},
		beforeRouteLeave(to, from, next) {
			to.meta.fromPage = "preview";
			to.meta.pageIndex = Number(this.pageIndex);
			next();
		},
		methods: {
			/**
			 * 返回资源列表
			 */
			goBackToResourceList() {
				const auditStateCode = this.resourceInfo.auditStateCode;
				const pathList = {
					W: "/rc/courseware/audit/wait", //待审核资源
					P: "/rc/courseware/search", //检索资源
					N: "/rc/courseware/audit/fail" //审核不通过资源
				};
				if (pathList[auditStateCode]) {
					this.$router.push(pathList[auditStateCode]);
				} else {
					this.$router.go(-1);
				}
			}
		}
	};
</script>

<style lang="less" scoped src="./index.less"></style>
